<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var arr = [
            {
                name: 'Jack',
                age: 18,
                gender: '男'
            }, {
                name: 'Rose',
                age: 20,
                gender: '女'
            }, {
                name: 'Top',
                age: 22,
                gender: '男'
            }, {
                name: 'Top1',
                age: 23,
                gender: '男'
            }
        ];
        var tableEle = document.createElement("table");
        var tbodyEle = document.createElement("tbody");
        var tr = document.createElement("tr");
        tr.innerHTML = "<th>姓名</th><th>年龄</th><th>性别</th>";
        // 加第一行th添加
        tableEle.appendChild(tbodyEle.appendChild(tr));
        // console.log(tableEle);
        for(var i=0;i<arr.length;i++){
            // arr 是数组  arr[i] ---> {name:,age:,gender:}
            var trContent = document.createElement("tr");
            // 把每个对象里的值放在td里
            for(var key in arr[i]){
                // key ----> 对象的索引 name/age gender 
                // arr[i][key]--> 对象的键值
                var td = document.createElement("td");
                td.innerHTML = arr[i][key];
                // 把td加到每一个tr里
                trContent.appendChild(td);
            }
            tbodyEle.appendChild(trContent)
        }
        // 把tbody里的东西加在table里
        tableEle.appendChild(tbodyEle);
        console.log(tableEle)
        document.body.appendChild(tableEle);


    </script>
</body>
</html>